<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>新增报损单-库存管理</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">

    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="sp-wrapper">
        <h2 class="sp-title"><span>不良品单</span></h2>
        <form action="/goods_loss_stock/loss_add"  method="post" id="sp-form">
            <div class="sp-tool">
			<span class="fl">
                <b>单据日期：<input type="text" name="billDate" th:value="${time}" class="date ui-input ui-datepicker-input" autocomplete="off"
                               id="form_date"></b>
                <b>单据编号：[[${billNo}]]
                <input type="hidden" name="billNo" th:value="${billNo}"/>
                </b>
            </span>
                <span class="fr"><i class="save" id="save">保存单据</i>
                </span>
            </div>
            <div class="sp-table">
                <table>
                    <thead>
                    <tr>
                        <th>商品</th>
                        <th>不良品数量</th>
                        <th>库存</th>
                        <th>仓位</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="sp-data">
                    <tr>
                        <td>
                            <input type="hidden" name="specNumber" class="specNumber">
                            <input type="hidden" name="stockId" class="stockId">
                            <input type="text" class="goods" placeholder="请输入SKU编码" autocomplete="off"/>
                        </td>
                        <td><input type="text" name="currQty" class="currQty" placeholder="请输入"/></td>
                        <td><input type="text" name="quantity" class="quantity" placeholder="请输入" readonly/></td>
                        <td><input type="text" name="locationName" class="locationName" placeholder="请输入" readonly/></td>
                        <td>
                            <i class="delete">-</i><i class="add">+</i>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="specNumber" class="specNumber">
                            <input type="hidden" name="stockId" class="stockId">
                            <input type="text" class="goods" placeholder="请输入SKU编码" autocomplete="off"/>
                        </td>
                        <td><input type="text" name="currQty" class="currQty" placeholder="请输入"/></td>
                        <td><input type="text" name="quantity" class="quantity" placeholder="请输入" readonly/></td>
                        <td><input type="text" name="locationName" class="locationName" placeholder="请输入" readonly/></td>
                        <td>
                            <i class="delete">-</i><i class="add">+</i>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="specNumber" class="specNumber">
                            <input type="hidden" name="stockId" class="stockId">
                            <input type="text" class="goods" placeholder="请输入SKU编码" autocomplete="off"/>
                        </td>
                        <td><input type="text" name="currQty" class="currQty" placeholder="请输入"/></td>
                        <td><input type="text" name="quantity" class="quantity" placeholder="请输入" readonly/></td>
                        <td><input type="text" name="locationName" class="locationName" placeholder="请输入" readonly/></td>
                        <td>
                            <i class="delete">-</i><i class="add">+</i>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="specNumber" class="specNumber">
                            <input type="hidden" name="stockId" class="stockId">
                            <input type="text" class="goods" placeholder="请输入SKU编码" autocomplete="off"/>
                        </td>
                        <td><input type="text" name="currQty" class="currQty" placeholder="请输入"/></td>
                        <td><input type="text" name="quantity" class="quantity" placeholder="请输入" readonly/></td>
                        <td><input type="text" name="locationName" class="locationName" placeholder="请输入" readonly/></td>
                        <td>
                            <i class="delete">-</i><i class="add">+</i>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="specNumber" class="specNumber">
                            <input type="hidden" name="stockId" class="stockId">
                            <input type="text" class="goods" placeholder="请输入SKU编码" autocomplete="off"/>
                        </td>
                        <td><input type="text" name="currQty" class="currQty" placeholder="请输入"/></td>
                        <td><input type="text" name="quantity" class="quantity" placeholder="请输入" readonly/></td>
                        <td><input type="text" name="locationName" class="locationName" placeholder="请输入" readonly/></td>
                        <td>
                            <i class="delete">-</i><i class="add">+</i>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <div class="sp-tool">
                <p>
                    <b><em>不良原因：</em><input type="text" name="lossText"  style="width: 400px"></b>
                </p>
            </div>
        </form>
    </div>

    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>

    <script type="text/javascript">
        $(function () {

            function render(data) {
                for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                    var goodsName =  data[i].specNumber +"_" + data[i].colorValue+ " " + data[i].sizeValue ;
                    tpl += '<li data-id="' + data[i].id + '" spec-no="' + data[i].specNumber + '" spec-name="' + data[i].colorValue+ " " + data[i].sizeValue +
                        '" data-quantity="' + data[i].currentQty + '" data-locationName="' + data[i].locationName + '">' + goodsName + '</li>';
                }
                $('.sp-result').html(tpl);
            }

            function init() {
                var $box = $('<ul class="sp-result"></ul>').appendTo($('body'));
                var $status = false;
                var $goodsName = null; //商品
                var $stockId = null; //商品id
                var $specNumber = null; //商品规格编号
                var $currentQty = null;
                var $locationName = null;
                $(document).click(function (e) {
                    if ($status) {
                        $box.hide();
                        $status = false;
                    }
                });
                $('#sp-data').delegate('.goods', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var _tr = _this.parent('td').parent('tr');
                    $goodsName = _this;
                    $specNumber = _tr.find('.specNumber'); //商品规格编码
                    $stockId = _tr.find('.stockId'); //商品id
                    $currentQty = _tr.find('.quantity');
                    $locationName = _tr.find('.locationName');
                    var _this = $(this);
                    var pos = _this.offset();
                    var x = pos.left;
                    var y = pos.top + _this.height();
                    $box.css({
                        left: x,
                        top: y
                    }).html('').hide();
                    $status = true;
                });
                $box.delegate('li', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    $goodsName.val(_this.text()); //商品
                    $specNumber.val(_this.attr('spec-no'));
                    $stockId.val(_this.attr('data-id'));
                    $currentQty.val(_this.attr('data-quantity'));
                    $locationName.val(_this.attr('data-locationName'));
                    $box.hide();
                    $status = false;
                });
                $box.click(function (e) {
                    e.stopPropagation();
                });
                // 商品搜索
                $('#sp-data').delegate('.goods', 'input', function (e) {
                    e.stopPropagation();
                    if ($box.css('display') == 'none') {
                        $box.show();
                    }
                    var key = $(this).val();
                    // ajax..
                    $.ajax({
                        url: "/ajax_loss_stock/loss_search_by_number",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify({key: key}),
                        success: function (res) {
                            $('.sp-result').html("");
                            if (res.code == 0 && res.data.length > 0) {
                                render(res.data);
                            }
                        }
                    });
                });
            }

            init();

            // 新增
            $(document).on('click','.add',function () {
                var newHtml = '<tr>\
					<td> <input type="hidden" name="specNumber" class="specNumber">\n' +
                    '<input type="hidden" name="stockId" class="stockId">\n' +
                    '<input type="text" class="goods" placeholder="请输入商品编码" autocomplete="off" /></td>';

                newHtml += '<td><input type="text" name="currQty" class="currQty" placeholder="请输入" /></td>\
                <td><input type="text" name="quantity" class="quantity" placeholder="请输入" readonly/></td>\
                <td><input type="text" name="locationName" class="locationName" placeholder="请输入" readonly/></td>\
                <td><i class="delete">-</i><i class="add">+</i></td>\
				</tr>';

                $('#sp-data').append(newHtml);
            });
            // 删除
            $('#sp-data').delegate('.delete', 'click', function () {
                $(this).parent('td').parent('tr').remove();
            });
            // 保存
            $('#save').click(function () {
                // 获取页面已有的一个form表单
                // var form = document.getElementById("sp-form");
                // 用表单来初始化
                var billDate = $("#form_date").val();
                if (billDate == '') {
                    alert("请填写单据日期");
                    return false;
                }
                var specNumber=$("input[name='specNumber']").val();
                if (specNumber == ''){
                    alert("请填写商品");
                    return false;
                }

                var currQty =document.getElementsByName("currQty");
                var qunaty =document.getElementsByName("quantity");
                for (var i = 0;i < currQty.length; i++){
                    if (qunaty[i].value != ''){
                        if (currQty[i].value == ''){
                            alert("请填写报损数量");
                            return false;
                        }
                        else if (parseInt(currQty[i].value) > parseInt(qunaty[i].value)){
                            alert("报损数量大于库存");
                            return false;
                        }
                    }
                }
                var locationName=$("input[name='locationName']").val();
                if (locationName == ''){
                    alert("请填写仓位");
                    return false;
                }
                var lossText=$("input[name='lossText']").val();
                if (lossText == ''){
                    alert("请填写报损原因");
                    return false;
                }
                $('#sp-form').submit();
            });
        });
    </script>
    <!-- end sp-wrapper -->
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#form_date' //指定元素
            });
        });
    </script>
</div>
</body>
<html>
